<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <title>keyiframes</title>
    <link rel="stylesheet" href="css/index.css">
</head>

<body>
    <section class="demo">
        <div class="slider">
            <ul class="clearfix">
                <li><a href="#bg1">熹妃</a></li>
                <li><a href="#bg2">安答应</a></li>
                <li><a href="#bg3">沈贵人</a></li>
                <li><a href="#bg4">华妃</a></li>
                <li><a href="#bg5">莞常在</a></li>
            </ul>
        </div>
        <img id="bg1" src="imgs/1.jpg" class="bg slideLeft" />
        <img id="bg2" src="imgs/2.jpg" class="bg slideBottom" />
        <img id="bg3" src="imgs/3.jpg" class="bg zoomIn" />
        <img id="bg4" src="imgs/4.jpg" class="bg zoomOut" />
        <img id="bg5" src="imgs/5.jpg" class="bg rotate" />
    </section>
</body>

</html>
